<template>
	<view style="padding-bottom: 200rpx;">
		<view class="img">
			<image class="image" :src="rq.imgUrl(detail.image?detail.image[0]:'')" mode="aspectFill"></image>
		</view>
		<view class="header">
			<view class="title">
				<view class="title-text">
					<view class="status">
						<view class="status0" v-if="detail.activity_status == 1">
							筹备中
						</view>
						<view class="status1" v-if="detail.activity_status == 2">
							报名中
						</view>
						<view class="status2" v-if="detail.activity_status == 3">
							已结束
						</view>
					</view>
					{{detail.title}}
					<!-- #ifndef H5 -->
					<button open-type="share" class="share img-share" @click.stop="handleShare">
						<image src="https://pw.qyang.cc/static/svg/icon-share1.svg" mode=""></image>
					</button>
					<!-- #endif -->
				</view>
				<view class="title-img">
					<view class="con2">
						<view class="con2-wrapper">
							<view class="con2-img">
								<image v-for="i,inx in detail.join_avatar" :key="inx" :src="rq.imgUrl(i)" mode="">
								</image>
								<view class="con2-text">
									累计 <span style="color: #FF7883;">{{detail.join_num}}人</span> 报名
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title">
				活动信息
			</view>
			<view class="content">
				<view class="c1">
					<view class="icon"> </view> 活动时间
				</view>
				<view class="c2">
					{{detail.issue}}
				</view>
				<view class="c1">
					<view class="icon"> </view>费用 <span
						style="color: #FF5866;">({{detail.is_collection==1?'平台代收':'现场收取'}})</span>
				</view>
				<view class="c2">
					<span style="color: #FF5866;">{{detail.price}}</span>
				</view>
				<view class="c1">
					<view class="icon"> </view>预计人数
				</view>
				<view class="c2">
					{{detail.sex}}
				</view>
				<view class="c1">
					<view class="icon"> </view>活动地点
				</view>
				<view class="c2">
					{{detail.address}}
				</view>
				<view class="c1">
					<view class="icon"> </view>发起人
				</view>
				<view class="c2">
					{{detail.username}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				活动详情
			</view>
			<view class="content">
				<view class="content_text">
					{{detail.details}}
				</view>
				<view class="list" v-for="item,index in detail.pic" :key="index">
					<image class="image" :src="rq.imgUrl(item)" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- <view class="bottom" v-if="list.status!=2">
			<view class="text" @click="shouCang">
				<image v-if="!isCang" src="https://pw.qyang.cc/static/svg/black-shoucang.svg" mode=""></image>
				<image v-else src="https://pw.qyang.cc/static/icon_cang1.png" mode=""></image>
				收藏
			</view>
			<view class="btn" @click="toPay()">立即报名</view>
		</view> -->

	</view>
</template>

<script>		
		export default {
			name: "activityDetail",
			props: {
				activityId: {
					type: [Number, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
					required: true // 可以根据实际需求设置是否为必传属性
				}
			},
			data() {
				return {
					detail: {},
					images: [],
					pic: [],
					isCang: false
				};
			},
			watch: {
				activityId: {
					handler(n, o) {
						if (n) {
							this.rq.getData('User_Activity/info', {
								id: n
							}).then(res => {
								this.detail = res.data
								this.images = res.data.image.split(',')
								this.pic = res.data.pic.split(',')
							})
						}
					},
					deep: true,
					immediate: true
				}
			},
			onShareAppMessage() {
				return {
					title: '活动详情',
					path: '/subpages/activity/detail?id='+this.activityId,
				}
			},
			onShareTimeline() {
				return {
					title: '活动详情',
					path: '/subpages/activity/detail?id='+this.activityId,
				}
			},
			methods: {
				handleShare(item) {
					let _this = this
					//#ifdef APP
					uni.share({
					    provider: 'weixin',
					    scene: "WXSceneSession",
					    type: 5,
					    imageUrl:'https://pw.qyang.cc/static/basicprofile.png',
					    title: '活动详情',
					    miniProgram: {
					        id: 'gh_30c9bdca022b',
					        path: 'subpages/activity/detail?id='+_this.activityId,
					        type: _this.rq.isTest?2:0,
					        webUrl: 'https://pw.qyang.cc'
					    },
					    success: ret => {
					        console.log(JSON.stringify(ret));
					    },
						fail: (err) => {
							console.log(JSON.stringify(err));
						}
					});
					//#endif
				},
				toPay() {
					if (this.detail.status == 1) {
						uni.showToast({
							title: '活动尚未开始，暂不能报名~',
							icon: 'none',
							duration: 2000
						});
					} else if (this.detail.status == 3) {
						uni.showToast({
							title: '活动已结束~',
							icon: 'none',
							duration: 2000
						});
					} else {
						let params = {
							id: this.id,
							price: this.detail.price.split('元')[0],
							title: this.detail.title
						}
						uni.navigateTo({
							url: '/subpages/activity/pay?params=' + encodeURIComponent(JSON.stringify(params))
						})
					}

				},
				shouCang() {
					this.rq.getData('collect/set_upvote', {
						id: this.id,
						class: 'collect',
						type: 3
					}).then(res => {
						if (res.code == 1) {
							this.isCang = !this.isCang
							if (this.isCang == true) {
								uni.showToast({
									title: '收藏成功',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '取消收藏',
									icon: 'none',
									duration: 2000
								});
							}
						}
					})
				}
			}
		}
</script>

<style lang="scss" scoped>
	.detail {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 20rpx;

		.title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 16px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 0.9);
			padding: 10rpx 20rpx;
		}

		.content {
			width: 100%;
			margin-top: 20rpx;

			.list {
				// margin: 0 20rpx;

				.image {
					width: 100%;
				}
			}
		}
	}

	.info {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 20rpx;

		.title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 16px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 0.9);
			padding: 10rpx 20rpx;
		}

		.content {
			width: 92%;
			height: 20%;
			border-radius: 10px;
			opacity: 1;
			background: #FFF6F9;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 13px;
			letter-spacing: 0px;
			color: #333333;
			margin: 20rpx;
			padding: 20rpx;

			.c1 {
				display: flex;
				align-items: center;

				.icon {
					width: 6px;
					height: 6px;
					background-color: black;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.c2 {
				display: flex;
				align-items: center;
				line-height: 90rpx;
			}
		}
	}

	.img {
		position: relative;
		z-index: 0;

		.image {
			width: 100%;
			height: 500rpx;
		}
	}

	.header {
		width: 100%;
		// height: 336rpx;
		border-radius: 16px 16px 0px 0px;
		opacity: 1;
		background: #FFFFFF;
		margin-top: -50rpx;
		z-index: 1;
		position: relative;

		.title {
			padding: 10rpx;
			position: relative;
			margin: 10rpx 0;
			// width: 96%;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title-text {
				font-family: 阿里巴巴普惠体 2.0;
				width: 100%;
				font-size: 15px;
				font-weight: 600;
				line-height: 26px;
				letter-spacing: 0px;
				color: #333333;
				white-space: pre-wrap;
				padding: 10rpx 20rpx;
				position: relative;
				box-sizing: border-box;

				.img-share {
					position: absolute;
					right: 40rpx;
					width: 18px;
					height: 18px;
					bottom: 16rpx;
					
					image{
						width: 18px;
						height: 18px;
						display: block;
					}
				}

				.status {
					font-size: 13px;
					font-weight: 500;
					line-height: 12px;
					text-align: center;
					letter-spacing: 0px;
					color: #FFFFFF;
					display: inline-block;
					margin-right: 20rpx;
					// position: absolute;
					margin-top: 10rpx;

					.status0 {
						background: #84E28C;
						width: 54.64px;
						height: 40rpx;
						border-radius: 8px 0px 8px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.status1 {
						background: #AE9CFE;
						width: 54.64px;
						height: 40rpx;
						border-radius: 8px 0px 8px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.status2 {
						background: rgba(153, 153, 153, 0.1);
						color: #999999;
						width: 54.64px;
						height: 40rpx;
						border-radius: 8px 0px 8px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.title-img {
				width: 100%;

				.con2 {
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 13px;
					font-weight: normal;
					// line-height: 12px;
					letter-spacing: 0px;
					margin: 20rpx;
					color: #333333;
					display: flex;
					align-items: center;

					.con2-wrapper {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 3;
						display: -webkit-box;
						-webkit-box-orient: vertical;

						.con2-img image {
							width: 34px;
							height: 34px;
							margin-right: 20rpx;
							border-radius: 50%;
							display: inline-block;
						}

						.con2-text {
							font-family: PingFang SC;
							font-size: 14px;
							font-weight: normal;
							// line-height: 12px;
							letter-spacing: 0px;
							color: #000000;
							margin-left: 0;
							width: auto;
							display: inline-block;
						}
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		display: flex;
		align-items: center;

		.text {
			margin: 0 40rpx;
			width: 10%;
			height: 88rpx;
			text-align: center;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 10px;
			font-weight: normal;
			line-height: 18px;
			letter-spacing: 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #666666;

			image {
				width: 21px;
				height: 21px;
			}
		}

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 20rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			width: 70%;
		}
	}
</style>